
<template>
    <Layout>
        <template slot="meta">
            <title>{{data.pageTitle}}</title>
        </template>
        <div slot="header">
            <Header></Header>
            <Tabs></Tabs>
        </div>
        <div class="news">
            <div class="list">
                <div class="list-item flex flex-wrap" :key="item.id" v-for="item in data.dataList">
                    <div class="img" :style="{height: item.height ? item.height  + 'px' : '160px'}"><img :src="item.img" :alt="item.title"></div>
                    <div class="text">
                        <div class="title ellipsis">{{ item.title }}</div>
                        <div :class="`desc line-clamp${item.height==120?4:item.height==88||item.height==78?2:5}`" :title="item.desc || item.price">{{ item.desc || item.price }}</div>
                    </div>
                </div>
            </div>
        </div>
        <ToTop></ToTop>
    </Layout>
</template>
<script>
    mainObj.toTop.init()
</script>
<style lang="less" scoped>
.news {
    min-width: 360px;
    .list {
        max-width: 1200px;
        padding: 0 10px;
        margin: auto;
        .list-item {
            // display: flex;
            margin-bottom: 10px;
            .img {
                width: 120px;
                height: 68px;
                margin-right: 10px;
                background-color: #ccc;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text {
                max-width: 1048px;
                line-height: 24px;
                width: calc(100% - 130px);
                .title {
                    font-size: 16px;
                    line-height: 18px;
                    margin-bottom: 10px;
                }
                .desc {
                    color: #666;
                }
            }
        }
    }
}
</style>